<template>
	<div class="charge">
		<h2>收费</h2>
		<el-tabs v-model="activeName">
			<el-tab-pane label="待收费" name="wait-charge">
				<div class="search-area">
					<div class="search-box">
						<el-autocomplete v-model="state" :fetch-suggestions="querySearchAsync" placeholder="请输入姓名/手机号/身份证搜索" @select="handleSelect"	suffix-icon="el-icon-search"></el-autocomplete>
					</div>
					<div class="date-picker">
						<el-button class="prev" @click="prevDay"><span><i class="el-icon-arrow-left"></i></span></el-button>	
						<el-date-picker v-model="date" type="date" placeholder="选择日期"></el-date-picker>
						<el-button class="next"  @click="nextDay"><span><i class="el-icon-arrow-right"></i></span></el-button>
					</div>
					<div class="doctor-picker">
						<el-select v-model="doctor" placeholder="请选择">
							<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
							</el-option>
						</el-select>
					</div>
				</div>
			</el-tab-pane>
			<el-tab-pane label="已收费" name="charged">
			</el-tab-pane>
		</el-tabs>
	</div>
</template>
<style scoped lang="less">
	/deep/.search-area {
		padding: 20px 40px 0;
		line-height: 30px;

		div {
			display: inline-block;
		}

		.el-input__inner {
			border-radius: 0px;
			height: 30px;
		}

		.el-input__icon {
			line-height: 30px;
		}

		.search-box {
			width: 360px;
			
			.el-autocomplete {
				width: 100%;
			}
		}

		.doctor-picker {
			padding-left: 20px;
		}

	}
</style>
<script>
	export default {
		name:"Charge",
		data() {
			return {
				activeName: 'wait-charge',
				state:"",
				date:"",
				doctor:"",
				options:[{
					label:"陈志斌",
					value:1					
				},{
					label:"何坦贤",
					value:2				
				},{
					label:"吕震",
					value:3			
				}]
			};
		},
		methods:{
			prevDay(){
				
			},
			nextDay(){
				
			},
			querySearchAsync(){
				
			},
			handleSelect(){
				
			}
		}
		
	}
</script>
